import router from '@/router'
import store from '@/store'

router.beforeEach(async(to, from, next) => {
  // 当前的路径
  const url = to.path
  //   获取到的token
  const token = store.getters.token
  //   白名单
  const whiteList = ['/login', '/404', '/test']

  //   1.有登录+去登录页 = 首页
  if (token && url === '/login') {
    next('/')
  }

  // 2.有登录+不去登录页 = 放行
  if (token && url !== '/login') {
    // 这里是一般后台页面走的逻辑分支
    // 如果在这发送用户数据请求，可以保证
    // 每个页面移动都能够得到用户数据
    // 不过这里单独判断对象，需要判断里面的值
    // 否则{}空对象判断永远都是true
    if (!store.getters.name) {
      await store.dispatch('user/getUserInfo')
      // 这一刻拿完了用户数据, 又还没有进入页面, 就可以进行权限数据的筛选
      // 由于权限数据需要共用, 所以封装到 vuex 当中
      // store.dispatch('permission/filterRoutes', store.getters.menus)
      const res = await store.dispatch('permission/filterRoutes', store.getters.menus)
      // 追加路由访问(菜单还没恢复, 另外刷新也会404, 后面在处理)

      router.addRoutes([
        ...res,
        { path: '*', redirect: '/404', hidden: true }
      ])
      next(to.path)
      return
    }
    next()
  }

  // 3.没登陆+在白名单 = 放行
  if (!token && whiteList.indexOf(url) > -1) {
    next()
  }

  //   4.没登陆+不在白名单 = 登录页
  if (!token && whiteList.indexOf(url) === -1) {
    next('/login')
  }
})

// 第一种写法
// import router from '@/router'
// import store from '@/store'

// router.beforeEach((to, from, next) => {
//   if (store.getters.token) {
//     // 有登陆
//     if (to.path === '/login') {
//       // 登录了再去登录页就踢到首页
//       next('/')
//     } else {
//       next()
//     }
//   } else {
//     // 没登录
//     const whiteList = ['/login', '/404', '/test']
//     if (whiteList.indexOf(to.path) > -1) {
//       // 如果目的地在白名单中, 放行
//       next()
//     } else {
//       // 不在白名单中
//       next('/login')
//     }
//   }
// })
